import React, { useContext } from "react"
import classNames from "classnames"
import { MenuContext } from ".."

export interface MenuItemProps {
	index?: string
	disabled?: boolean
	className?: string
	style?: React.CSSProperties
}

const MenuItem: React.FC<MenuItemProps> = props => {
	const { index, disabled, className, style, children } = props

	const context = useContext(MenuContext)

	const classes = classNames("menu-item", className, {
		"is-disabled": disabled,
		"is-active": index === context.index,
	})

	const handleClick = () => {
		index && !disabled && context.onSelected && context.onSelected(index)
	}

	return (
		<li className={classes} style={style} onClick={handleClick}>
			{children}
		</li>
	)
}

MenuItem.displayName = "MenuItem"

export default MenuItem
